document.addEventListener('DOMContentLoaded', () => {
    // DOM元素
    const doms = {
        searchBox: document.querySelector('.s-search-box'),
        line: document.querySelector('.s-bot-line'),
        form: document.querySelector('.s-form-wrapper'),
        leftAside: document.querySelector('.s-left-aside'),
        emptyContent: document.querySelector('.s-empty-preview'),
        fullContent: document.querySelector('.s-full-preview'),
        stage: document.querySelector('.s-show-area'),
        heroName: document.querySelector('.s-hero-name'),
        skinName: document.querySelector('.s-skin-name'),
        downloadBtn: document.querySelector('.s-download'),
        title: document.querySelector('.s-preview-wrapper .s-title'),
    };

    // 当前搜索结果
    let list = [];

    // 当前英雄名称
    let heroName = '';

    // 当前图片url地址
    let picUrl = '';

    // 当前皮肤名称
    let skinName = '';

    // 处理输入框聚焦与失焦的样式表现
    function handleInputBoxStyle() {
        doms.searchBox.addEventListener('focus', function() {
            this.placeholder = '';
            doms.line.style.transition = 'none';
            doms.line.classList.add('active');
        });
        doms.searchBox.addEventListener('blur', function() {
            setTimeout(() => {
                this.placeholder = '输入英雄名称';
                doms.line.style.transition = 'opacity 500ms';
                doms.line.classList.remove('active');
            }, 500);
        });
    }

    // 初始处理
    function handleInitialStyle() {
        // 阻止表单的默认行为
        doms.form.addEventListener('submit', (e) => {
            e.preventDefault();
        });
        // 左侧布局问题
        doms.leftAside.style.setProperty('--form-height', `${doms.form.clientHeight}px`);
        // 左侧预览区面板显示
        updatePreviewArea();
    }

    // 重置（每次输入时进行必要的样式重置）
    function reset() {
        // 清空当前英雄名称
        heroName = '';
        // 清空当前图片url地址
        picUrl = '';
        // 清除当前皮肤名称
        skinName = '';
        // 清除selected样式
        doms.stage.classList.remove('selected');
        // 清除大图效果
        doms.stage.style.backgroundImage = 'none';
    }

    // 弹窗显示
    async function showMessage(message) {
        // 最长长度为20（后加6个英文省略号，因此，实际最长长度为17个中文字符）
        if (message.length > 17) {
            message = message.substring(0, 17) + '......';
        }
        const p = document.createElement('p');
        p.innerHTML = `抱歉，暂未找到与&nbsp;<span style="font-weight: bold; font-size: 18px;">${message}</span>&nbsp;相关的内容`
        p.style.position = 'fixed';
        p.style.top = '30px';
        p.style.left = '50%';
        p.style.transform = 'translate(-50%, 0)';
        p.style.padding = '16px 32px';
        p.style.borderRadius = '14px';
        p.style.textAlign = 'center';
        p.style.backgroundColor = 'rgba(0, 0, 0, .5)';
        p.style.color = 'white';
        p.style.transition = 'opacity 800ms';
        p.style.opacity = 0;
        document.body.appendChild(p);
        setTimeout(() => {
            p.style.opacity = 1;
        }, 10);

        await new Promise((resolve) => {
            setTimeout(() => {
                p.style.opacity = 0;
                resolve();
            }, 1500);
        });
        setTimeout(() => {
            document.body.removeChild(p);
        }, 1000);
    }

    // 下载功能
    function handleDownload() {
        doms.downloadBtn.addEventListener('click', async () => {
            // 获取临时链接
            const response = await fetch(picUrl);
            const blob = await response.blob();
            const url = URL.createObjectURL(blob);
            // 触发下载
            const a = document.createElement('a');
            a.href = url;
            a.download = `${skinName}.jpg`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        });
    }

    // 渲染预览图区域
    function renderPreviewArea() {
        const htmlList = list.map((item, index) => {
            return `
                <li class="s-list-item" data-index="${index+1}">
                    <img src="${item.url}" data-url="${item.url}" data-skin="${item.name}"/>
                    <p>${item.name}</p>
                </li>
            `;
        });
        doms.fullContent.innerHTML = htmlList.length<=0 ? '' : htmlList.join('');
    }

    // 预览小图绑定点击事件
    function bindClickEventOnPreviewArea() {
        doms.fullContent.addEventListener('click', (e) => {
            const target = e.target;
            if (target.tagName === 'IMG') {
                doms.stage.style.backgroundImage = `url(${target.dataset.url})`;
                doms.heroName.textContent = heroName;
                skinName = target.dataset.skin;
                doms.skinName.textContent = target.dataset.skin;
                picUrl = target.dataset.url;
                // 解锁下载按钮的hover效果
                doms.stage.classList.add('selected');
                // 更新标题内容
                doms.title.textContent = `图片预览（${target.parentNode.dataset.index}/${list.length}）`;
            }
        });
    }

    // 处理表单提交事件
    function handleFormSubmit() {
        doms.searchBox.addEventListener('keyup', async (e) => {
            if (e.key === 'Enter') {
                // 获取输入
                const value = e.target.value.trim();
                // 重置上一次的数据
                reset();
                // 清空输入
                e.target.value = '';
                if (value==='') {
                    list = [];
                    doms.title.textContent = `图片预览`;
                    updatePreviewArea();
                    return;
                }
                const response = await fetch(`/search?kw=${value}`);
                const result = await response.json();
                // 输入内容不合理
                if (result.code!==200)  {
                    list = [];
                    // 更新标题内容
                    doms.title.textContent = `图片预览`;
                    // 显示弹窗
                    showMessage(value);
                    updatePreviewArea();
                    return;
                }
                // 更新列表数据
                list = [...result.data];
                // 更新英雄名称
                heroName = result.hero;
                // 更新标题内容
                doms.title.textContent = `图片预览（1/${list.length}）`;
                // 展示第一张图片
                picUrl = list[0].url;
                doms.stage.style.backgroundImage = `url(${picUrl})`;
                doms.heroName.textContent = heroName;
                doms.skinName.textContent = list[0].name;
                doms.stage.classList.add('selected');
                // 更新皮肤名称
                skinName = list[0].name;
                // 更新预览区域
                updatePreviewArea();
                // 重新渲染预览区域
                renderPreviewArea();
            }
        });
    }

    // 处理预览区面板显示问题
    function updatePreviewArea() {
        if (list.length>0) {
            doms.emptyContent.style.display = 'none';
            doms.fullContent.style.display = 'flex';
        } else {
            doms.emptyContent.style.display = 'flex';
            doms.fullContent.style.display = 'none';
        }
    }

    function init() {
        // 初始处理
        handleInitialStyle();
        // 输入框聚焦与失焦的样式表现处理
        handleInputBoxStyle();
        // 处理表单提交
        handleFormSubmit();
        // 预览图区域绑定点击事件
        bindClickEventOnPreviewArea();
        // 下载功能
        handleDownload();
    }

    init();
});